<template>
	<view class="register-page">
		<image class="bg-img-top" src="https://zhoukaiwen.com/img/loginImg/2.png"></image>
		<image class="bg-img-bottom" src="https://zhoukaiwen.com/img/loginImg/3.png"></image>
		<view class="page-title">{{biaoti}}</view>
		<view class="welcome-text">欢迎加入我们
			<switch checked @change="switch1Change" />
		</view>
		<form class="register-form">
			<view class="input-group">
				<image src="https://zhoukaiwen.com/img/loginImg/user.png"></image>
				<input type="text" name="username" placeholder="请输入用户名" v-model="username" />
			</view>
			<view class="input-group">
				<image src="https://zhoukaiwen.com/img/loginImg/sj.png"></image>
				<input type="number" name="phone" placeholder="请输入手机号" maxlength="11" v-model="phone" />
			</view>
			<view class="input-group">
				<image src="https://zhoukaiwen.com/img/loginImg/pwd.png"></image>
				<input type="password" name="password" maxlength="16" placeholder="请输入密码" v-model="pwd" />
			</view>
			<view class="input-group">
				<image src="https://zhoukaiwen.com/img/loginImg/pwd.png"></image>
				<input type="password" name="confirmPassword" maxlength="16" placeholder="请再次输入密码"
					v-model="confirmPwd" />
			</view>
			<button @tap="register()">注 册</button>
			<view class="links">
				<text @tap="loginPage()">已有账号，去登录</text>
			</view>
		</form>
		<image class="bg-img-bottom2" src="https://zhoukaiwen.com/img/loginImg/bg1.png"></image>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue';
	import {
		http
	} from '@/utils/request.js'
	import {
		useInfoStore
	} from '@/store/store.js'
	const biaoti = ref('欢迎面试用户')
	const username = ref('');
	const phone = ref('');
	const pwd = ref('');
	const confirmPwd = ref('');

	const register = () => {
		if (!username.value) {
			uni.showToast({
				title: '请输入用户名',
				icon: 'none'
			});
			return;
		}
		if (!phone.value) {
			uni.showToast({
				title: '请输入手机号',
				icon: 'none'
			});
			return;
		}
		if (!/^[1][3,4,5,7,8,9][0-9]{9}$/.test(phone.value)) {
			uni.showToast({
				title: '请输入正确手机号',
				icon: 'none'
			});
			return;
		}
		if (!pwd.value) {
			uni.showToast({
				title: '请输入密码',
				icon: 'none'
			});
			return;
		}
		if (pwd.value !== confirmPwd.value) {
			uni.showToast({
				title: '两次输入的密码不一致',
				icon: 'none'
			});
			return;
		}

		zuche();
	};
	//跳转登录
	const loginPage = () => {
		uni.navigateTo({
			url: '/pages/login/login'
		});
	};
	//注册
	const tuser = ref({
		type:1
	})
	const zuche = async () => {
		tuser.value.username = username.value;
		tuser.value.password= pwd.value;
		tuser.value.phone=phone.value;
		if (type.value) {
			biaoti.value = '欢迎面试用户'
			tuser.value.type = 2
		} else {
			biaoti.value = '欢迎企业用户'
			tuser.value.type = 1
		}
		console.log(tuser.value)
		let data = await http({
			url: '/User/enroll',
			method: 'post',
			data: tuser.value
		})
		console.log(data)
		if (data.flag) {
			uni.showToast({
				title:data.shuju,
				icon: 'none'
			});
			loginPage();
		}else{
			uni.showToast({
				title:data.shuju,
				icon: 'none'
			});
		}
	}
	//选择是企业还是面试
	const type=ref(false)
	const switch1Change = (e) => {
		type.value=e.detail.value
		if (type.value) {
			biaoti.value = '欢迎面试用户'
			tuser.value.type = 2
		} else {
			biaoti.value = '欢迎企业用户'
			tuser.value.type = 1
		}
		console.log('switch1 发生 change 事件，携带值为', e.detail.value)
	}
	
</script>

<style lang="scss">
	.register-page {
		position: relative;
		max-width: 750px;
		width: 100vw;
		min-height: 100vh;

		.bg-img-top {
			position: absolute;
			width: 100%;
			top: -150rpx;
			right: 0;
			z-index: -1;
		}

		.bg-img-bottom {
			position: absolute;
			width: 50%;
			bottom: 0;
			left: -50rpx;
			z-index: -1;
		}

		.bg-img-bottom2 {
			position: absolute;
			width: 100%;
			bottom: 0;
			right: 0;
			z-index: -1;
		}

		.page-title {
			text-indent: 40rpx;
			font-size: 46rpx;
			color: #000;
			padding: 200rpx 0 30rpx 0;
			font-weight: bold;
		}

		.welcome-text {
			text-indent: 40rpx;
			font-size: 32rpx;
			color: #aaaaaa;
			padding: 0rpx 0 60rpx 0;
		}

		.register-form {
			width: 80%;
			padding: 55rpx;
			margin: 0rpx auto 0 auto;
			font-size: 28rpx;
			z-index: 9;

			.input-group {
				position: relative;

				image {
					width: 40rpx;
					height: 40rpx;
					position: absolute;
					left: 40rpx;
					top: 28rpx;
				}

				input {
					padding: 0 20rpx 0 120rpx;
					height: 90rpx;
					line-height: 90rpx;
					margin-bottom: 50rpx;
					background: #f6f6f6;
					border: 1px solid #f6f6f6;
					font-size: 28rpx;
					border-radius: 50rpx;
				}
			}

			button {
				font-size: 28rpx;
				background: linear-gradient(to right, #5677fc, hsla(217, 100%, 56%, 1));
				color: #fff;
				height: 90rpx;
				line-height: 90rpx;
				border-radius: 50rpx;
			}

			.links {
				display: flex;
				justify-content: space-evenly;
				color: #666666;
				margin: 30rpx 30rpx 40rpx 0;

				text {
					cursor: pointer;
				}
			}
		}
	}
</style>